<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
        <link rel="stylesheet" href="css/ls.css" type="text/css">
        <title>Title</title>
        <style>
            a:link{
                background: #f90;
                border: 10px dotted #a94;
            }

            a:hover{
                background: #9f0;
                border: 3px dashed #84f;
            }
            a:visited{
                background: #588;
                border: 3px solid #f04;
            }
            a:active{
                background: #fc9;
                border: 10px double #df1;
            }
            p{
                font-size: 20px;
                text-indent: 2em;
                /*font:font-weight font-style font-size/line-height font-family*/
                font: normal normal 14px/30px "小篆";
            }
            span{
                height: 0;
                width: 0;
                display: block;
                border-top: 20px solid #f03;
                border-right: 20px solid transparent;
                border-bottom: 20px solid transparent;
                border-left: 20px solid transparent;
                position: absolute;
                top: 228px;
                left: 100px;
            }
            .back-img{
                width: 200px;
                height: 200px;
                /*background: 背景颜色  背景图  背景图是否重复 背景图的位置/背景大小; */
                /*顺序不固定*/
                background: #fc3 url("img/logo.png") no-repeat 0 0/100% 100%;
                background:  no-repeat 0 0/100% 100% url("img/logo.png") #f3c;
            }
        </style>
    </head>
    <body>
        <div>
            <a href="#">
                <p>上的灌水灌水广告的尔特忒特铁哦忒他偶尔特哦i特哦i图饿哦u恶徒讹脱欸u同欸天技术开发经理是基辅罗斯i而我让我u物体托</p>
            </a>
        </div>
        <span></span>
        <!--背景图片的综合书写形式-->
        <div class="back-img"></div>
        <hr>
        <!--浮动元素-->
        <!--从父元素的边缘开始挨个排列-->
        <!--浮动元素会脱离文档流,浮动元素会遮挡后面的兄弟元素,但是不会遮挡文字-->
        <ul class="u1">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
        <hr>
        <!--margin的bug以及解决方法-->
        <div class="margin">
            <div>
                1.将margin改为padding
                2.给父元素添加边框
                3.给父元素或者是该元素添加浮动
                4.给父元素添加overflow:hidden(溢出隐藏)
            </div>
        </div>
        <!--margin的叠加-->
        <!--解决方法，BFC-->
        <div class="margins">
            <div class="s1"></div>
            <div class="s2"><div class="s1"></div></div>
        </div>

        <!--多行文本不换行-->
        <p id="p1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. A asperiores cum deleniti, dignissimos eaque, excepturi fuga libero numquam praesentium quisquam sit sunt vel veritatis? In maiores nisi officiis sint sunt?</p>
        <!--为元素选择器的应用-->
        <ul id="">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>

        <!--BFC的应用-->
        <!--1.margin的重叠-->
        <div class="bfc">
            <p class="p2">sfs</p>
            <div class="div1">
                <p class="p2">sfsfs</p>
            </div>
        </div>
        <!--2.两栏布局-->
        <div class="bfc">
            <div floatbox></div>
            <div box="der"></div>
        </div>
        <!--3。浮动元素参与高度计算-->
        <ul floatheigt>
            <li></li>
            <li></li>
        </ul>
    </body>
</html>